﻿    
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    @*<link href="~/Content/css/Teacher_Manager.css" rel="stylesheet" />*@
    <style>
        .content{
            width:1210px;
            margin:0 auto;
        }
        .flex {
            display: flex;
        }

        .a-c {
            align-items: center;
        }

        .j-s {
            justify-content: center;
        }

        .toolbar {
            padding: 10px 15px;
            width: 700px;
            border-radius: 20px
        }

            .toolbar div {
                height: 38px;
            }
    </style>
</head>
<body>

    <div class="content">
        <table id="mytable" lay-filter="test"></table>
    </div>

    <script type="text/html" id="mytoolbar">
        <div class="flex toolbar a-c">
            <button class="layui-btn layui-btn-sm" style="display: block; margin-right: 50px;" lay-event="add">添加</button>

            姓名:&nbsp;
            <input type="text" id="search" name="title" placeholder="请输入姓名查询" autocomplete="off" class="layui-input" style="height: 30px; width: 200px;">
            <button id="search" class="layui-btn layui-btn-sm" style="margin-left: 30px;" onclick="search()">搜索</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" style="margin-left: 30px;" onclick="resetSearch()">重置</button>
        </div>
    </script>

    <script type="text/html" id="mybar">
        {{#  if(d.state=='启用'){ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="freeze" style="border-radius: 6px;height:26px;width:56px; line-height:26px;">
            冻&nbsp;&nbsp;&nbsp;&nbsp;结
        </a>
        {{#  } else{ }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="freeze" style="border-radius: 6px;height:26px;width:56px; line-height:26px;">启&nbsp;&nbsp;&nbsp;&nbsp;用</a>
        {{# } }}
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="flush" style="border-radius: 6px;height: 26px;width: 70px;line-height: 26px">重置密码</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit" style="border-radius: 6px;height: 26px;width: 70px;line-height: 26px">编&nbsp;&nbsp;&nbsp;&nbsp;辑</a>
    </script>

    <script src="~/Content/layui/layui.js"></script>


    @* 添加弹出页面开始 *@

    <div style="display: none; padding: 20px;" id="saveOrUpdateDiv">
        <form class="layui-form" lay-filter="dataFrm" id="dataFrm" style="margin-top:20px">

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">学号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="studentNumber" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="studentName" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>

            @*<div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">编号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>*@



            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width:400px">
                            <label class="layui-form-label">性别：</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="sex" value="1" title="男">
                                <input type="radio" name="sex" value="0" title="女">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">班级：</label>
                    <div class="layui-input-block" style="width:190px">
                        <select id="mySelect" name="classCode" lay-filter="role" autocomplete="off">
                            <option value="">请选择班级</option>
                         
                        </select>
                    </div>
                </div>
            </div>

       

            <div class="layui-form-item" style="margin-top:30px"">
                <div class="layui-input-block">
                    <button type="button"
                            class="layui-btn layui-btn-normal  layui-icon layui-icon-upload-circle"
                            lay-filter="doSubmit" lay-submit="">
                        提交
                    </button>
                    <button type="reset"
                            class="layui-btn  layui-btn-warm layui-btn-primary layui-icon layui-icon-refresh">
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>

    @* 添加弹出页面结束 *@


    <script>
        var search;
        var searchString = "";
        var resetSearch;

        layui.use(['table', 'jquery', 'form', 'laytpl'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;
            var laytpl = layui.laytpl;

            $('#search').val(searchString);

            search = function () {
                searchString = $('#search').val();
                tableIns.reload({
                    where: { search: searchString }
                });
                $('#search').val(searchString);
            }

            //查询方法
            resetSearch = function () {
                searchString = "";
                tableIns.reload({
                    where: { search: "" }
                });
                $('#search').val(searchString);
            }

            var tableData = {
                elem: '#mytable'//绑定元素
                , url: '/api/getallstudent'//数据接口
                , where: { search: "" }
                , page: true //开启分页
                , height: 650
                , limit: 12
                , toolbar: '#mytoolbar'
                , defaultToolbar: ['print', 'exports']
                , cols: [[ //表头
                    //{ type: 'checkbox', fixed: 'left', /* LAY_CHECKED: true */ }
                    { type: 'numbers', width: 62 }, //添加序号
                    { field: 'id', title: 'ID', width: 80, fixed: 'left', hide: true, align: 'center' },
                    { field: 'studentNumber', title: '学号', width: 242, align: 'center' },
                    { field: 'studentName', title: '姓名', width: 220, align: 'center' },
                    { field: 'sex', title: '性别', width: 100, align: 'center' },
                    { field: 'classCode', title: '班级', width: 180, align: 'center' },
                    {
                        field: 'state', title: '状态', width: 100, align: 'center',
                        templet: function (d) {
                            if (d.state == "启用") {
                                return '<span style="background-color:#0984e3;color:#ffffff;display:inline-block;border-radius:4px;width: 66px;height: 24px;line-height: 24px;">' + "启&nbsp;&nbsp;&nbsp;&nbsp;用" + '<span>'
                            }
                            if (d.state == "禁用") {
                                return '<span style="background-color:#e74c3c;color:#ffffff;display:inline-block;border-radius:4px;width: 66px;height: 24px;line-height: 24px;">' + "禁&nbsp;&nbsp;&nbsp;&nbsp;用" + '<span>'
                            }
                        }
                    },
                    { toolbar: '#mybar', title: '操作', width: 300, align: 'center' }
                ]]
            }

            var tableIns = table.render(tableData);

            //监听工具栏事件
            table.on('toolbar(test)', function (obj) {
                switch (obj.event) {
                    case 'add':
                        openAddUser();
                        break;
                }
            })
            var url;
            var mainIndex;
            //打开添加页面
            function openAddUser() {
                mainIndex = layer.open({
                    type: '1',
                    title: '添加用户',
                    content: $("#saveOrUpdateDiv"),
                    area: ['440px', '440px'],
                    success: function (index) {
                        //  清空表达数据
                        $("#dataFrm")[0].reset();
                        $.get("/api/getclassidtostudent", function (obj) {
                            console.log(obj);
                            $("#mySelect").empty();
                            obj.data.map(r => {
                                $("#mySelect").append(`<option value="${r.id}">${r.classCode}</option>`)
                            })
                            //重新渲染
                            form.render();
                        })
                        url = "user/addUser.action";
                    }
                });


            }

            //打开修改页面
            function openUpdateUser(data) {
                mainIndex = layer.open({
                    type: '1',
                    title: '修改用户',
                    content: $("#saveOrUpdateDiv"),
                    area: ['440px', '440px'],
                    success: function (index) {
                        console.log(data);


                        console.log(data["sex"])
                        if (data["sex"] == "女") {
                            data["sex"] = 0;
                        }
                        else {
                            data["sex"] = 1;
                        }
                        

                        $.get("/api/getclassidtostudent", function (obj) {
                            console.log(obj);
                            $("#mySelect").empty();
                            obj.data.map(r => {
                                $("#mySelect").append(`<option value="${r.id}">${r.classCode}</option>`)
                            })

                            //重新渲染
                            form.render();
                        })

                        //拿到其他字段，回填表单
                        form.val("dataFrm", data);

                        url = "user/addUser.action";
                    }
                });
                console.log("数据",data);
                //提交
                form.on("submit(doSubmit)", function (obj) {
                    var data1 = form.val("dataFrm")
                    console.log("data1", data1);
                    $.post("/api/editstudent", {
                        id: data.id,
                        studentName: data1.studentName,
                        sex: data1.sex,
                        classID: data1.classCode,
                        studentNumber: data1.studentNumber
                    }, function (obj) {
                        layer.msg(`${data.studentName}的信息修改成功！`)
                        //关闭弹出层
                            layer.close(mainIndex);
                        //刷新数据表格
                        table.render(tableData);
                    })
                })

            }

            //提交
            form.on("submit(doSubmit)", function (obj) {
                //序列化表单数据
                var params = $("#dataFrm").serialize();
                $.post("/api/updatestudent", params, function (obj) {
                    layer.msg("成功")
                    //关闭弹出层
                    layer.close(mainIndex);
                    //刷新数据表格
                    layer.reload(tableIns)
                })
            })

            table.on('tool(test)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                var layEvent = obj.event;
              
                if (layEvent === 'freeze') {
                    layer.confirm(`是否${data.state == false ? '禁用' : '启用'}此账户`, { icon: 3, title: '提示' }, function (index) {
                        //do something
                        $.get('/api/deletestudent', { id: data.id }, function (res) {
                            tableIns.reload(tableData);
                        })
                        layer.close(index);
                    });
                }
                else if (layEvent === 'flush') {
                    layer.confirm(`${data.studentName}的密码将会被恢复成123456，确定恢复吗？`, function (index) {
                        $.get("/api/resetpassword", { id: data.id }, function () {
                            //重新加载表格数据，刷新
                            tableIns.reload(tableData);
                        })
                        layer.msg(`${data.studentName}的密码重置成功！`);
                        layer.close(index);
                    });
                }
                else if (layEvent === 'edit') {
                    openUpdateUser(data);
                }
            });
        });
    </script>
</body>
</html>
